<template>
  <div class="container">
    <div class="extension-page">
      <ul class="nav">
        <li class="item" :class="{ 'on': navIndex == 1 }" @click="navIndex = 1">一级</li>
        <li class="item" :class="{ 'on': navIndex == 2 }" @click="navIndex = 2">二级</li>
        <li class="item" :class="{ 'on': navIndex == 0 }" @click="navIndex = 0">未开通</li>
      </ul>
      <div class="body">
        <div class="wrapper" :class="{ 'on': navIndex == 1 }">
          <ul class="list" v-if="list1.length > 0">
            <li class="item" v-for="(item, index) in list1" :key="index" v-if="item.id != userInfo.id" @click="router(item.id)">
              <div class="avatar">
                <img class="image" :src="item.avatarUrl" alt="">
              </div>
              <div class="user">
                <div class="nick">{{ item.nickName || item.name }}</div>
                <!-- <div class="job">{{ item.company.title ? item.company.title : '' }}</div> -->
              </div>
              <div class="content">
                <div class="icon">
                  <img class="image" src="/static/images/icon/location.png" alt="">
                </div>
                <div class="text">{{ item.address }}</div>
              </div>
            </li>
            <li class="nomore" v-if="isLock1">我是有底线的</li>
          </ul>
          <div class="data-empty" v-else>
            <image class="icon-empty" src="/static/images/icon/empty.png" alt=""/>
          </div>
        </div>
        <div class="wrapper" :class="{ 'on': navIndex == 2 }">
          <ul class="list" v-if="list2.length > 0">
            <li class="item" v-for="(item, index) in list2" :key="index" v-if="item.id != userInfo.id" @click="router(item.id)">
              <div class="avatar">
                <img class="image" :src="item.avatarUrl" alt="">
              </div>
              <div class="user">
                <div class="nick">{{ item.nickName || item.name }}</div>
                <!-- <div class="job">{{ item.company.title ? item.company.title : '' }}</div> -->
              </div>
              <div class="content">
                <div class="icon">
                  <img class="image" src="/static/images/icon/location.png" alt="">
                </div>
                <div class="text">{{ item.address }}</div>
              </div>
            </li>
            <li class="nomore" v-if="isLock2">我是有底线的</li>
          </ul>
          <div class="data-empty" v-else>
            <image class="icon-empty" src="/static/images/icon/empty.png" alt=""/>
          </div>
        </div>
        <div class="wrapper" :class="{ 'on': navIndex == 0 }">
          <ul class="list" v-if="list0.length > 0">
            <li class="item" v-for="(item, index) in list0" :key="index" v-if="item.id != userInfo.id" @click="router(item.id)">
              <div class="avatar">
                <img class="image" :src="item.avatarUrl" alt="">
              </div>
              <div class="user">
                <div class="nick">{{ item.nickName || item.name }}</div>
                <!-- <div class="job">{{ item.company.title ? item.company.title : '' }}</div> -->
              </div>
              <div class="content">
                <div class="icon">
                  <img class="image" src="/static/images/icon/location.png" alt="">
                </div>
                <div class="text">{{ item.address }}</div>
              </div>
            </li>
            <li class="nomore" v-if="isLock0">我是有底线的</li>
          </ul>
          <div class="data-empty" v-else>
            <image class="icon-empty" src="/static/images/icon/empty.png" alt=""/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      navIndex: 1,
      list1: [],
      list2: [],
      list0: [],
      page: 1,
      isLock1: false,
      isLock2: false,
      isLock0: false,
      page1: false,
      page2: false,
      page0: false,
    }
  },

  computed: {
    userInfo () {
      return this.$store.state.userInfo;
    },
  },

  methods: {
    /*
     * 获取列表1
     */
    getList1 () {
      let self = this;
      this.$toast.show();
      this.$axios.getfx1().then((res) => {
        self.$toast.hide();
        let data = res.data;
        if (0 === data.code * 1) {
          self.list1 = data.data;
        }
      });
    },
    /*
     * 获取列表2
     */
    getList2 () {
      let self = this;
      this.$axios.getfx2().then((res) => {
        let data = res.data;
        if (0 === data.code * 1) {
          self.list2 = data.data;
        }
      });
    },
    /*
     * 获取列表0
     */
    getList0 () {
      let self = this;
      this.$axios.getfx0().then((res) => {
        let data = res.data;
        if (0 === data.code * 1) {
          self.list0 = data.data;
        }
      });
    },
    router (id) {
      let url = `/pages/guest/main?id=${id}`;
      wx.navigateTo({url});
    },
  },

  /*
  * 页面上拉触底事件的处理函数
  */
  onReachBottom: function () {
    let self = this;
    if (self.navIndex == 1) {
      if (!self.isLock1) {
        self.$toast.show('玩命加载中');
        self.page += 1;
        self.$axios.getfx1({
          page: self.page1,
        }).then(res=>{
          self.$toast.hide();
          if (0 === res.data.code * 1) {
            if (res.data.data.length > 0) {
              self.list1.push(...res.data.data);
            } else {
              self.isLock1 = true;
            }
          }else {
            self.$modal.show('数据加载失败!');
          }
        })
      }
    }
    if (self.navIndex == 2) {
      if (!self.isLock2) {
        self.$toast.show('玩命加载中');
        self.page += 1;
        self.$axios.getfx2({
          page: self.page2,
        }).then(res=>{
          self.$toast.hide();
          if (0 === res.data.code * 1) {
            if (res.data.data.length > 0) {
              self.list2.push(...res.data.data);
            } else {
              self.isLock2 = true;
            }
          }else {
            self.$modal.show('数据加载失败!');
          }
        })
      }
    }
    if (self.navIndex == 0) {
      if (!self.isLock0) {
        self.$toast.show('玩命加载中');
        self.page += 1;
        self.$axios.getfx0({
          page: self.page0,
        }).then(res=>{
          self.$toast.hide();
          if (0 === res.data.code * 1) {
            if (res.data.data.length > 0) {
              self.list0.push(...res.data.data);
            } else {
              self.isLock0 = true;
            }
          }else {
            self.$modal.show('数据加载失败!');
          }
        })
      }
    }
  },

  mounted () {
    this.getList1();
    this.getList2();
    this.getList0();
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>
